<script setup>
import { Close } from '@element-plus/icons-vue'

const props = defineProps({
  title: {
    type: String,
    default: '',
  },
  width: {
    type: String,
    default: '50%',
  },
  customClass: {
    type: String,
    default: '',
  },
})

const emit = defineEmits(['ok', 'close'])

const visible = defineModel('visible', { type: Boolean, default: false })

const handleClose = () => {
  visible.value = false
  emit('close')
}

const handleOk = () => {
  emit('ok')
}
</script>

<template>
  <el-dialog
    class="v-modal-dialog"
    v-model="visible"
    :width="width"
    :show-close="false"
    :close-on-click-modal="false"
    :custom-class="customClass"
  >
    <template #header>
      <slot name="header">
        <div class="header">
          <span>{{ title }}</span>
          <el-icon class="icon-close" color="#eee" @click.stop="handleClose">
            <Close />
          </el-icon>
        </div>
      </slot>
    </template>
    <slot></slot>
    <template #footer>
      <slot name="footer">
        <div class="footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="handleOk">确 定</el-button>
        </div>
      </slot>
    </template>
  </el-dialog>
</template>

<style lang="scss">
.v-modal-dialog {
  padding: 0;

  .el-dialog__header {
    padding: 0;
  }

  .el-dialog__footer {
    padding: 0;
  }
}
</style>
<style lang="scss" scoped>
.header {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  width: 100%;
  height: 50px;
  color: #fff;
  background: #4575ee;

  .icon-close {
    cursor: pointer;
  }
}

.footer {
  display: flex;
  justify-content: flex-end;
  padding: 10px 20px;
}
</style>
